<script setup>
import { ref,computed } from 'vue';
const formState = ref({
  count: 50,
  num: null,
  val: 0.04
});
const spinning = ref(false)
const open = ref(false)
const onFinish = (values) => {
  spinning.value = true
  setTimeout(() => {
    spinning.value = false
    open.value = true
  }, 2000);
};

let text = computed(() => {

  return  '需要的水渠孔数量:'+ parseInt( formState.value.count /((formState.value.num || 1) * 0.04))
})

</script>

<template>
  <div class="content-bg">

    <a-card style="width: 80vh; margin: 0 auto; background-color: rgba(255, 255, 255, 0.7);" title="排水路边石自动设计系统">
    <a-spin :spinning="spinning">
      <a-form :model="formState" name="basic" autocomplete="off" style="width: 100%;" :label-col="{ span: 4 }"
        @finish="onFinish">
        <a-form-item label="积水量(m³)" name="count">
          <a-input-number id="inputNumber" v-model:value="formState.count"  style="width: 100%;" placeholder="输入水流速度"   :readonly="true">

            <template #suffix>
              <span>立方米</span>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item label="水渠横截面(㎡)" name="num">
          <a-input-number id="inputNumber" v-model:value="formState.val"  style="width: 100%;" placeholder="输入水流速度"  :readonly="true" />
        </a-form-item>
        <a-form-item label="水流速度(m/s)" name="num"     :rules="[{ required: true, message: '输入水流速度' }]">
          <a-input-number id="inputNumber" v-model:value="formState.num"  style="width: 100%;" placeholder="输入水流速度"/>
        </a-form-item>
       
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
 
          <a-button type="primary" html-type="submit">运行</a-button>
 
        </a-form-item>
      </a-form>
      <template v-if="open">
          <a-result
            status="success"
            :title="text"
          >
          </a-result>
      </template>
    
    </a-spin>
  </a-card>

  </div>



</template>

<style scoped>
.content-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-bg {
  background: url("./assets/bg.jpg") no-repeat 100% 100% ;
  height: 100vh;
  width: 100vw;
  background-position:  0 0;
  background-size: cover;
  padding-top: 50px;
} 

.ant-form-item .ant-form-item-label >label {
  font-weight: bold !important;
}
</style>
